<!--
  动态表格 用于批量填入数据
 -->
<template>
  <div
    @blur.capture="handleMouseBlur"
    ref="question-group"
    :id="value"
    :name="value"
    class="form-table-index"
    style="padding: 5px 10px; border: 1px solid red"
  >
    <generate-form
      v-if="item.childList.length"
      :key="formParseKey"
      ref="generateForm"
      :form-conf="formConf"
      :page-form-model="formModel"
      @on-change="handleChange"
    />
  </div>
</template>

<script>
import mixin from '../mixin'
import { isLabelTag } from '../../GenerateForm/FormItemLabel'
import { removeHtmlTag } from '../../../utils/index'

export default {
  name: 'TQuestionGroup',
  mixins: [mixin],
  props: ['models'],
  data() {
    return {
      addOrUpdateVisible: false,
      isVisible: true,
      formParseKey: new Date().getTime(),
      formModel: {},
      formConf: {
        fields: [],
        formKey: '',
        disabled: false,
        span: 24,
        size: 'small',
        labelPosition: 'top',
        labelWidth: 100,
        formRef: 'elSubForm',
        formRules: 'rules',
        gutter: 15,
        formBtns: false,
        resetBtn: false,
        theme: {
          backgroundImg: '',
          showTitle: true,
          showDescribe: true,
          showNumber: false,
          btnsColor: null
        }
      }
    }
  },
  watch: {
    item: {
      handler: function (val, oldVal) {
        this.formConf.fields = val.childList
      },
      immediate: true
    }
  },
  beforeCreate() {
    this.$options.components.GenerateForm = require('../../GenerateForm/GenerateForm').default
  },
  methods: {
    async handleChange(value, field, item) {
      // const isValidate = await this.$refs.generateForm.$refs[this.formConf.formRef].validate()
      // if(isValidate){
      //   this.$set(this.value, 0, subFormModel)
      // }
      // console.log('this.$refs.generateForm.formModel', this.$refs.generateForm.formModel)
      // const subFormModel = this.$refs.generateForm.formModel
      //
      // // 下面这个for循环是为了保证数据都有值
      // for (let i in subFormModel) {
      //   if (subFormModel[i] === undefined || subFormModel[i] !== '') {
      //     return
      //   }
      // }
      // // console.log(1)
      // this.$refs.generateForm.$refs[this.formConf.formRef].validate((valid) => {
      //   this.$set(this.value, 0, subFormModel)
      // })
    },
    handleMouseBlur(event) {
      this.$refs.generateForm.$refs[this.formConf.formRef].validate((valid) => {
        if (valid) {
          const subFormModel = this.$refs.generateForm.formModel
          this.$set(this.value, 0, subFormModel)
        }
        console.log(valid, 'valid')
      })
    }
  }
}
</script>

<style scoped>
.add-button {
  text-align: center;
  margin-top: 10px;
}
</style>
